<template>
  <div>
    <div class="bjtk xshdz_bjtk">
      <div class="bjtk_list">
        <!-- <div class="head">
                    <h2></h2>
                    <a-button class="editable-add-btn" @click="close">
                        <a-icon type="close"/>
                    </a-button>
        </div>-->
        <div class="close" @click="close">
          <a-icon type="close" />
        </div>
        <div class="ant-tabs-bar">
          <div class="bjd_tit">
            <span class="cz_title" >收货地址</span>
            <span class="cz_title_border"></span>
          </div>
        </div>
        <div class="bj" v-if="isShow">
            <div class="list">
              <span class="span">{{dwmc}}</span>
              <!-- <span class="span">任务人：{{rwr}}</span>
              <span class="span">电话：{{LXDH}}</span> -->
            </div>
            <!-- <div class="list">
              <span class="span">余额：{{khye}}</span>
              <span class="span">任务人：{{rwr}}</span>
              <span class="span">电话：{{LXDH}}</span>
            </div> -->
          <div class="lxr_list_box">
            <div class="lxr_list" v-for="(item,i) in shdzList" :key="i">
              <div class="lxr_p">
                  <div class="inp_box">
                    <span class="inp_box_tit"><span style="color:red" v-if="index_ed==i?true:false">*</span>联系人：</span>
                    <span v-if="index_ed==i?false:true" class="inp_val">{{item.lxr}}</span>

                    <a-input v-if="index_ed==i?true:false" placeholder="请输入联系人" v-model="item.lxr"></a-input>
                  </div>
                  <div class="inp_box">
                  
                  <span class="inp_box_tit"><span style="color:red" v-if="index_ed==i?true:false">*</span>手机号：</span>
                  <span v-if="index_ed==i?false:true" class="inp_val">{{item.phone}}</span>
                  <a-input v-if="index_ed==i?true:false" placeholder="请输入手机号" v-model="item.phone"></a-input>
                </div>
                <div class="inp_box">
                  <span class="inp_box_tit">电话：</span>
                  <span v-if="index_ed==i?false:true" class="inp_val">{{item.lxdh}}</span>

                  <a-input v-if="index_ed==i?true:false" placeholder="请输入联系电话" v-model="item.lxdh"></a-input>
                </div>
                <div class="inp_box">
                  <span class="inp_box_tit">收货地址：</span>
                  <span v-if="index_ed==i?false:true" class="inp_val">{{item.lxrdz}}</span>

                  <a-input v-if="index_ed==i?true:false" placeholder="请输入收货地址" v-model="item.lxrdz"></a-input>
                </div>
                <div class="cz_btn_ico">
                    <div v-if="index_ed==i?false:true" style="float:right">
                      <a class="deit_ico" @click="Updatelxr(item,i)">
                        <!-- <a-icon type="form" /> -->
                        <span>修改</span>
                      </a>
                      <a-popconfirm
                        title="确定删除吗?"
                        ok-text="确定"
                        cancel-text="取消"
                        @confirm="Deletelxr(i)"
                      >
                        <a href="#">
                          <!-- <a-icon type="delete" /> -->
                          <span>删除</span>
                        </a>
                      </a-popconfirm>
                    </div>
                    <div v-if="index_ed==i?true:false" style="float:right">
                      <a class="deit_ico" @click="Svaexgshdz(item)">
                        <!-- <a-icon type="check" /> -->
                        <span>保存</span>
                      </a>

                      <a-popconfirm title="确定取消吗?" ok-text="确定" cancel-text="取消" @confirm="cansav(i)">
                        <a href="#">
                          <!-- <a-icon type="close-circle" /> -->
                          <span>取消</span>
                        </a>
                      </a-popconfirm>
                    </div>
                </div>
              </div>
              
              <!-- <p>
              <span class="span"></span>
              <span class="span"></span>
              </p>-->
            </div>
            <div class="zw_list" v-if="!shdzList.length">暂无收货地址列表</div>
          </div>
          <!-- <div class="list_btn">
            <a-button @click="Xzlxr">新增联系人</a-button>
          </div>-->
        </div>
        <!-- v-if="tjisShow" -->
        <div class="bj bj_inp">
          <div class="inp_list">
            <span style="color:red;width:5px;display:inline-block;">*</span>
            <!-- <span>姓名：</span> -->
            <span >姓名：</span>
            <a-input
              style="width:70%"
              class="gjxq_area"
              placeholder="请输入姓名"
              v-model="xgshdz_xm"
              allow-clear
            />
          </div>
          <div class="inp_list list">
            <span style="color:red;width:5px;display:inline-block;">*</span>
            <!-- <span>手机：</span> -->
            <span >手机：</span>
            <a-input
              class="gjxq_area"
              style="width:70%"
              placeholder="请输入手机"
              v-model="xgshdz_phone"
              allow-clear
            />
          </div>
          <div class="inp_list list">
            <span >电话：</span>
            <a-input
              class="gjxq_area"
              placeholder="请输入电话"
              style="width:70%"
              v-model="xgshdz_lxdh"
              allow-clear
            />
          </div>
          <div class="inp_list list">
            <span >地址：</span>
            <a-input
              class="gjxq_area"
              placeholder="请输入收货地址"
              style="width:70%"
              v-model="lxrdz"
              allow-clear
            />
          </div>
          <div class="list_btn">
            <!-- <a-button style="width: 130px;margin-right:20px " @click="tjback" v-if="tjisShow">返回</a-button> -->
            <a-button type="primary" class="button" @click="Quxiao()">取消</a-button>
            <a-button type="primary" @click="SvaeLxr()">保存联系人</a-button>
        </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import qs from "qs";
import moment from "moment";
export default {
  data() {
    return {
      moment,
      // 跳转携带参数信息
      xsdinfo: "",
      // 销售单号
      xsdh: "",
      // 单位名称
      dwmc: "",
      // 公司编码
      gsbm: "",
      // 授权id
      sqdwid: "",
      //数据库名称
      database: "ERP2_BEARING",
      // ip地址
      ip: "122.112.240.180",
      // 客户余额
      khye: "",
      // 任务人
      rwr: "",
      // 跟进记录条数
      gjls: "",
      // 联系人
      LXDH: "",
      // 当前行信息
      genjinInfo: [],
      // 联系人数组
      shdzList: [],
      // 弹框切换
      isShow: true,
      tjisShow: false,
      xgisShow: false,
      lxrInfo: "",
      xgshdz_xm: "",
      // 手机号
      xgshdz_phone: "",
      // 电话
      xgshdz_lxdh: "",
      // 当前行信息
      genjinInfo: "",
      // 修改当前联系人信息
      lxrInfo: "",
      lxrdz: "",
      // id_num
      id_num: "",
      edit_flag: true,
      index_ed: "i",
      shdz_item: ""
    };
  },

  methods: {
    //修改联系人

    Svaexgshdz(item) {
      console.log(item);
      if (item.lxr != "" && item.lxr != undefined) {
        // console.log(this.id_num)
        this.axios
          .post(
            "https://yb.bearing.cn/wxapi/smt_newAddressEdit.php",
            qs.stringify({
              id_num: item.ID_NUM,
              gsbm: this.genjinInfo.GSBM,
              dwmc: this.genjinInfo.DWMC,
              lxr: item.lxr,
              lxdh: item.lxdh,
              phone: item.phone,
              lxrdz: item.lxrdz,
              token:sessionStorage.getItem('smt_token'),
              // vison: this.vison
            })
          )
          .then(res => {
            if (res.data.code == 103) {
              // this.$message.success("修改成功");
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg
              });
              this.index_ed = "i";
              // this.xgisShow = false;
              this.getshdzList();
              // this.isShow = true;
            } else {
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg
              });
            }
          });
      }
    },
    // 取消联系人
    Quxiao(){
      this.xgshdz_xm=''
      this.xgshdz_lxdh=''
      this.xgshdz_phone=''
      this.lxrdz=''
    },
    // 保存联系人
    SvaeLxr() {
      if (this.xgshdz_xm != "" && this.xgshdz_xm != undefined) {
        this.axios
          .post(
            "https://yb.bearing.cn/wxapi/smt_newAddressAdd.php",
            qs.stringify({
              gsbm: this.gsbm,
              dwmc: this.dwmc,
              lxr: this.xgshdz_xm,
              lxdh: this.xgshdz_lxdh,
              phone: this.xgshdz_phone,
              lxrdz: this.lxrdz,
              token:sessionStorage.getItem('smt_token'),
              // vison: this.vison
            })
          )
          .then(res => {
            console.log(res);
            if (res.data.code == 103) {
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg
              });
              (this.xgshdz_xm = ""),
                (this.xgshdz_lxdh = ""),
                (this.xgshdz_phone = ""),
                (this.lxrdz = ""),
                this.getshdzList();
              // this.isShow = true;
              // this.tjisShow = false;
            } else {
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg
              });
            }
          });
      } else {
        this.$notification["error"]({
          message: "失败",
          description: "姓名不能为空"
        });
      }
    },
    //关闭弹出框
    close() {
      this.$store.state.tjhy = false;
      this.index_ed = "i";
      sessionStorage.removeItem("shdz_item");
      console.log(this.index_ed);
    },

    // 修改联系人
    Updatelxr(item, i) {
      console.log(item, i);
      this.shdz_item = item;
      sessionStorage.setItem("shdz_item", JSON.stringify(item));
      // this.isShow = false;
      // this.xgisShow = true;
      this.index_ed = i;

      // this.edit_flag = false;

      // this.$store.state.shdzList = this.shdzList;
      // this.$store.state.lxr_i = i;
      // this.lxrInfo = this.$store.state.shdzList[this.$store.state.lxr_i];
      // this.xgshdz_xm = this.lxrInfo.lxr;
      // this.xgshdz_phone = this.lxrInfo.phone;
      // this.xgshdz_lxdh = this.lxrInfo.lxdh;
      // this.id_num = this.lxrInfo.ID_NUM;

      // this.$store.state.jsgl = false;
      // this.$store.state.xgtj = true;
    },

    // 删除联系人
    Deletelxr(i) {
      // 获取联系人数组
      this.axios
        .post(
          "https://yb.bearing.cn/wxapi/smt_newAddressDelete.php",
          qs.stringify({
            id_num: this.shdzList[i].ID_NUM,
            token:sessionStorage.getItem('smt_token'),
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 103) {
            this.$message.success("删除成功");
            this.getshdzList();
          } else {
            this.$message.error(res.msg);
          }
        });
    },

    //取消修改联系人
    cansav(i) {
      console.log(i);
      this.index_ed = "i";
      console.log(this.shdz_item);
      var item = JSON.parse(sessionStorage.getItem("shdz_item"));

      this.shdzList[i] = item;
    },
    // 获取联系人数组
    getshdzList() {
      this.axios
        .post(
          "https://yb.bearing.cn/wxapi/smt_newAddressList.php",
          qs.stringify({
            gsbm: this.gsbm,
            dwmc: this.dwmc,
            token:sessionStorage.getItem('smt_token'),
          })
        )
        .then(res => {
          console.log(res);
          this.shdzList = res.data.result;
        });
    }
  },
  created() {
    this.gsbm = sessionStorage.getItem("gsbm");
    this.genjinInfo = JSON.parse(sessionStorage.getItem("genjinInfo"));
    console.log(this.genjinInfo);
    this.dwmc = this.genjinInfo.DWMC;
    this.getshdzList();
    this.LXDH = this.genjinInfo.LXDH;
    this.khye = this.genjinInfo.KHYE;
    this.rwr = this.genjinInfo.RWR;
  }
};
</script>

<style lang='less'>
.xshdz_bjtk {
  // position: absolute;
  // z-index: 9999;
  // width: 60%;
  // height: auto;
  // background-color: #fff;
  // text-align: center;
  // padding: 20px;
  // top: 160px;
  // left: 50%;
  // transform: translateX(-50%);

  .bjtk_list {
     .ant-tabs-bar{
      margin-bottom: -25px;
      padding-top: 10px;
      padding-left: 20px;
    }
    .cz_title{
      display: block;
      width: 13%;
      color: #1890ff;
      height: 18px;
      text-align: center;
    }
    .cz_title_border{
      display: inline-block;
      width: 13%;
      height: 2px;
      background-color: #1890ff;
    }
    .head {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .bj {
      .ts {
        margin: 5px 0 0 75px;
        color: red;
        font-size: 12px;
        i {
          margin: 0 5px;
        }
      }
      .top_list {
        border-bottom: 1px solid #f1f1f1;
      }
     .list {
        margin: 5px 0;
        display: flex;
        padding-left: 20px;
        // justify-content: space-around;
        // color: #999;
        h2 {
          margin: 0;
        }
        .span {
          margin-right: 20px;
        }
        .cz_btn {
          display: block;
          width: 25%;
        }
        .tit {
          display: inline-block;
          width: 80px;
          text-align: right;

          i {
            color: #ff0000;
            padding: 0 4px;
          }
        }

        .radio {
          margin-left: 10px;
        }

        .text {
          width: 288px;
          vertical-align: top;
        }
      }
      .inp_list {
        display: inline-block;
        width: 25%;
      }
       .lxr_list {
        text-align: left;
        margin: 10px;
        padding-left: 10px;
        border-bottom: 1px solid #f1f1f1;
        height: 80px;
        .inp_box {
          display: inline-block;
          // margin-right: 40px;
          width: 45%;
          margin-right: 10px;
          height: 30px;
          line-height: 30px;
          margin-bottom: 10px;
          .inp_box_tit{
            color:#ccc;
            display:inline-block;
            width:30%;
          }
          input {
            width: 70%;
          }
        }
        .cz_btn_ico{
          width:4%;
          position: relative;
          top: -51px;
          right: -20px;
          a{
            display: block;
            height: 40px;
          }
        }
        p {
          margin: 0;
          .span {
            margin-right: 20px;
          }
        }
        .lxr_p {
          display: flex;
          // justify-content: space-between;
          margin: 10px 0;
          flex-wrap: wrap;
          .deit_ico {
            // margin-right: 20px;
            // float: right;
          }
        }
      }
      .lxr_list_box {
        overflow-y: scroll;
        height: 300px;
        position: relative;
        top: -30px;
      }
      .bcloading {
        position: relative;
        left: 42%;
        bottom: 214px;
      }
    }
    .zw_list {
      color: #999;
      padding: 70px 0;
    }
    .bj_inp {
      position: absolute;
      left: 35px;
      bottom: 40px;
      width: 90%;
      height: 120px;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 10px;
      background-color:#fbfbfb;
    }
     .list_btn {
        text-align: center;
        width: 35%;
        display: flex;
        position: absolute;
        right: 12px;
        bottom: 9px;
        button {
          width: 80%;
          height: 30px;
        }
        .button{
          background-color: #fff;
          color: #666;
          margin-right: 10px;
          width: 80%;
          border: 1px solid #ccc;
        }
      }
  }
}
</style>
